<template>
  <div class="bgWhite bannerArticle"  v-loading="loading">
    <p >卡片-文章管理</p>
    <div>
      <div class="articleItem " @click="closeAddDialog">
        <div class="add">
          <i class="iconfont icon-add_2_normal"></i>
          <p class="tip">建议上传.png/.jpg/.jpeg格式，且尺寸为4:3，大小≤1M，每次只能上传一个</p>
        </div>
      </div>
      <div class="articleItem" v-for=" item in bannerArticleList" :key="item.id" @click="setCurIitem(item, 'edit')">
        <el-image :src="item.httpImage"></el-image>
        <el-button  @click.stop="setCurIitem(item, 'del')" v-if="$_has('/banner_article/del')">删除</el-button>
      </div>
    </div>

    <Add v-show="addShow" :show="addShow" @closeDialog="closeAddDialog"></Add>
    <Edit v-show="editShow" :id="curItem.banner_id" :show="editShow" @closeDialog="closeEditDialog"></Edit>
    <Del v-show="delShow"  :id="curItem.banner_id" :show="delShow" @closeDialog="closeDelDialog"></Del>
  </div>
</template>

<script>
import { Add, Del, Edit } from './components'
import { hasPermission } from '@/utils/index.js'

import { bannerArticleList } from '@/api/index/bannerArticle'
export default {
  data () {
    return {
      addShow: false,
      editShow: false,
      delShow: false,
      curItem: {},
      bannerArticleList: [],
      loading: false
    }
  },
  created () {
    this.getDataList()
  },
  components: { Add, Del, Edit },

  methods: {
    setCurIitem (item, type){
      this.curItem = item
       if(type == 'edit'){ 
        this.closeEditDialog()  
      }else if(type == 'del'){
        this.closeDelDialog()
      }
      
    },
    getDataList () {
      this.loading = true
      bannerArticleList().then(res => {
        if(res.status){
          this.bannerArticleList  = res.data.rows
        }
        this.loading = false
      })
    },
    closeAddDialog(){
      if(hasPermission('/banner_article/add')){
        this.addShow = !this.addShow
        if(!this.addShow){
          this.getDataList()
        }
      }else{
        this.$message.error('无新增卡片文章权限，请联系管理员修改权限')
      }
     
    },
    closeDelDialog(){
      this.delShow = !this.delShow
      if(!this.delShow){
        this.getDataList()
      }
    },
    closeEditDialog () {
      if(hasPermission('/banner_article/edit')){
        this.editShow = !this.editShow
        if(!this.editShow){
          this.getDataList()
        }
      }else{
        this.$message.error('无编辑卡片文章权限，请联系管理员修改权限')
      }
    }
  
  }

}
</script>

<style lang="scss">
@import '@/styles/index/bannerArticle.scss';

</style>